<html>
    <head>
        <title>
            Shapes.
        </title>
        <script type="text/javascript">

        <!--
            var compute = function(){
                console.log("start ..............");
                var shapes = getShapes();

                for (var i=0 ; i<shapes.length ; i++){
                    perimeter(shapes[i]);
                    area(shapes[i]);
                }

                shapes.sort(function(a,b){return a.type>b.type;});

                for (var i=0 ; i<shapes.length ; i++){
                    checkShape(shapes[i]);
                }

                console.log("..............  end.");
            };

            var perimeter  = function(shape){
                if (shape.type === "circle"){
                    shape.perimeter = 2*Math.PI*shape.radius;
                }
                if (shape.type === "rectangle"){
                    shape.perimeter = 2*(shape.length+shape.width);
                }
                if (shape.type === "square"){
                    shape.perimeter = 4*shape.length;
                }
                if (shape.type === "triangle"){
                    shape.perimeter = shape.base+shape.side1+shape.side2;
                }
                if (shape.type === "Parallelogram"){
                    shape.perimeter = 2*(shape.base+shape.side);
                }
            };

            var area = function(shape){
                if (shape.type === "circle"){
                    shape.area = Math.PI*shape.radius*shape.radius;
                }
                if (shape.type === "rectangle"){
                    shape.area = shape.length*shape.width;
                }
                if (shape.type === "square"){
                    shape.area = shape.length*shape.lnegth;
                }
                if (shape.type === "triangle"){
                    shape.area = shape.base*shape.height;
                }
                if (shape.type === "Parallelogram"){
                    shape.area = shape.base*shape.height;
                }
            };

            var checkShape = function(shape){
                if (!shape.perimeter || !shape.area)
                    throw new Error("Perimeter or Area has not been been calculated");
            };

            var getShapes = function(){
                var shapes = [];
                var shape = {type:"circle", color:"blue", radius:5};
                shapes.push(shape);
                var shape = {type:"square", color:"red", length:3};
                shapes.push(shape);
                var shape = {type:"rectangle", color:"red", length:3, width:4 };
                shapes.push(shape);
                var shape = {type:"triangle", color:"yellow", base:3, height:4, side1:4, side2:5 };
                shapes.push(shape);
                var shape = {type:"Parallelogram", color:"blue", base:3, height:4, side:5 };
                shapes.push(shape);
                var shape = {type:"rectangle", color:"red", length:3, width:4 };
                shapes.push(shape);
                return shapes;
            };

        -->
        </script>

    </head>

    <body id="myBody">
    <h3>
        Shapes.
    </h3>
    <p>
        This page calculates Perimeter and Area for a list of shapes.
        Go through these steps:
       <ol>
       <li> Click on the button.</li>
       <li> When you see the error in Firebug console, set a breakpoint on the error (red dot), then re-run to halt on the error message .</li>
       <li> Locate the defect causes the error.</li>
       </ol>
    </p>

    <button id="reproducer" onclick="compute()">
      Calculate Perimeter/Area !
    </button>

  </body>

</html>